<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<title></title>
<link type="text/css" rel="stylesheet" href="css/style1.css" />
  <link rel="stylesheet" href="plugins/elementui/index.css">
  <link rel="stylesheet" href="css/login.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
  <script src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function () {
   var height=$(document).height();
   $('body').css('height',height);
   var mart=height-500;
   mart = mart/2;
   $('.loginBox').css('marginTop',mart);
})
</script>
</head>

<body>
<div class="loginBox">
  <form method="post" class="login-form" action="/login.do" label-position="left">
    <h1>欢迎登陆</h1>
    <div class="item">
      <div class="icon"><img src="images/icon1.png" /></div>
      <div class="txt"><input id="username" name="username" type="text" placeholder="请输入您的用户名"/></div>
    </div>
    <div class="item">
      <div class="icon"><img src="images/icon2.png" /></div>
      <div class="txt"><input id="password" name="password" type="password" placeholder="请输入您的密码"/></div>
    </div>
    <div class="item_2">
      <input id="rememberMe" name="remenberNe" type="checkbox">
      <span>记住密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </input>
      <input id="autoLogin" name="autoLogin" type="checkbox" >
      <span>自动登录</span></input>
      <a href="psd.html">忘记密码？</a>
    </div>
    <div class="item_3">
      <button name="" type="submit"  class="btn" onclick="Save()">安全登录</button>
    </div>
    <div class="item_4">
      还没有账号？<a href="register.html">立即注册</a>
    </div>
  </form>
</div>
</body>
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script type="text/javascript">
    //记住用户名密码
    function Save() {
        if ($("#rememberMe").prop("checked")) {
            var str_username = $("#username").val();//用户名
            var str_password = $("#password").val();//密码
            $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
            $.cookie("username", str_username, { expires: 7 });
            $.cookie("password", str_password, { expires: 7 });
        }
        else {
            $.cookie("rmbUser", "false", { expire: -1 });
            $.cookie("username", "", { expires: -1 });
            $.cookie("password", "", { expires: -1 });
        }

        // if ($("#autoLogin").prop("checked")) {
        //     var str_username = $("#username").val();
        //     var str_password = $("#password").val();
        //     $.cookie("auto", "true", { expires: 7 }); //存储一个带7天期限的cookie
        //     $.cookie("username", str_username, { expires: 7 });
        //     $.cookie("password", str_password, { expires: 7 });
        // }
        // else {
        //     $.cookie("auto", "false", { expire: -1 });
        //     $.cookie("username", "", { expires: -1 });
        //     $.cookie("password", "", { expires: -1 });
        // }
    }

    $(document).ready(function () {
        $("#autoLogin").change(function() {
            if($("#autoLogin").prop("checked")){
                $.cookie("auto", "true", { expires: 7 });
            }else{
                $.cookie("auto", "false", { expires: 7 });
            }
        });

        if ($.cookie("rmbUser") == "true") {
            $("#rememberMe").attr("checked", true);
            $("#username").val($.cookie("username"));
            $("#password").val($.cookie("password"));
        }

        if ($.cookie("auto") == "true") {
            setTimeout(function(){
                if($.cookie("auto") == "true")
                    window.location.ref='/login.do';
            },5000);
        }
    })
</script>
</html>
